// Copyright 2014 The Chromium Authors. All rights reserved.
// Use of this source code is governed by a BSD-style license that can be
// found in the LICENSE file.

import {assert} from 'chrome://resources/js/assert.m.js';
import {isRTL} from 'chrome://resources/js/util.m.js';
import {html, PolymerElement} from 'chrome://resources/polymer/v3_0/polymer/polymer_bundled.min.js';

import {Viewport} from '../viewport.js';

export class ViewerPageIndicatorElement extends PolymerElement {
  static get is() {
    return 'viewer-page-indicator';
  }

  static get template() {
    return html`{__html_template__}`;
  }

  static get properties() {
    return {
      label: {type: String, value: '1'},

      index: {type: Number, observer: 'indexChanged'},

      pageLabels: {type: Array, value: null, observer: 'pageLabelsChanged'}
    };
  }

  constructor() {
    super();

    /** @type {number|undefined} */
    this.timerId = undefined;

    /** @private @type {?Viewport} */
    this.viewport_ = null;
  }

  /** @override */
  ready() {
    super.ready();
    const callback = this.fadeIn_.bind(this);
    window.addEventListener('scroll', function() {
      requestAnimationFrame(callback);
    });
  }

  /** @param {!Viewport} viewport */
  setViewport(viewport) {
    this.viewport_ = viewport;
  }

  /** @private */
  fadeIn_() {
    // Vertically position relative to scroll position.
    let percent = 0;
    if (this.viewport_) {
      percent = this.viewport_.position.y /
          (this.viewport_.contentSize.height - this.viewport_.size.height);
    }
    this.style.top =
        percent * (document.documentElement.clientHeight - this.offsetHeight) +
        'px';

    // Horizontally position to compensate for overlay scrollbars.
    assert(document.documentElement.dir);
    let overlayScrollbarWidth = 0;
    if (this.viewport_ && this.viewport_.documentHasScrollbars().vertical) {
      overlayScrollbarWidth = this.viewport_.overlayScrollbarWidth;
    }
    this.style[isRTL() ? 'left' : 'right'] = `${overlayScrollbarWidth}px`;

    // Animate opacity.
    this.style.opacity = 1;
    clearTimeout(this.timerId);

    this.timerId = setTimeout(() => {
      this.style.opacity = 0;
      this.timerId = undefined;
    }, 2000);
  }

  pageLabelsChanged() {
    this.indexChanged();
  }

  indexChanged() {
    if (this.pageLabels) {
      this.label = this.pageLabels[this.index];
    } else {
      this.label = String(this.index + 1);
    }
  }
}

customElements.define(
    ViewerPageIndicatorElement.is, ViewerPageIndicatorElement);
